<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS -->
    <div class="status_bar"></div>
    <!-- #endif -->
    <view class="top">
      <my-collect
        :status="companyInfo.status"
        :company_id="companyInfo.supplier_id"
        :from="'shop'"
      ></my-collect>
      <view class="card row_between">
        <view class="card-left column_evenly">
          <view class="card-left-title one_ellipsis">
            {{ companyInfo.company_details.company_name || "暂无数据" }}
          </view>
          <view class="card-left-tab column_start">
            <view class="tip row_between">
              <span class="tip-content one_ellipsis">{{
                companyInfo.categorys
              }}</span>
              <span class="tip-sold"
                >已售 {{ companyInfo.company_details.order_count || "0" }}</span
              >
            </view>
            <view class="condition">
              <view class="title time">
                <image src="../../static/images/time.png"></image>
                <span class="times"
                  >{{ companyInfo.company_details.open_time | timeFilter }} -
                  {{ companyInfo.company_details.end_time | timeFilter }}</span
                >
              </view>
              <view class="title">
                <span class="money"
                  >￥{{
                    companyInfo.company_details.starting_price || "0"
                  }}</span
                >起送
              </view>
            </view>
            <view class="address">
              <span class="address-info"
                >地址：{{
                  companyInfo.company_details.company_address || "暂无"
                }}</span
              >
              <!--  @click.stop="call(item.company_details.site_phone)" -->
              <!-- <view class="iphone">
                <image src="/static/image/iphone.png"></image>
              </view> -->
            </view>
          </view>
        </view>
        <view class="card-right">
          <image
            :src="
              'https://copartner.oss-cn-beijing.aliyuncs.com/' +
                companyInfo.company_details.site_logo ||
              '../../static/image/logo.jpg'
            "
          >
          </image>
        </view>
      </view>
    </view>

    <view class="contents">
      <div class="shop">
        <div class="classifi" :style="classiLength">
          <div
            class="classifi-item column_start"
            v-for="(item, index) in classifiList"
            :key="index"
            @click="navTo(item, index)"
          >
            <image :src="item.icon || '../../static/image/logo.jpg'"></image>
            <span class="classifi-item-span one_ellipsis">{{
              item.name || "暂无"
            }}</span>
          </div>
        </div>
      </div>
      <!-- 精选专题Selected topics -->
      <!-- <div class="topics">
        <span class="Selected">精选专题</span>
        <div class="images" v-if="project_list.length">
          <img
            :src="project_list[0].img"
            alt=""
            class="lis1"
            @click="lis(project_list[0])"
          />
          <img
            :src="project_list[1].img"
            alt=""
            class="lis2"
            @click="lis(project_list[1])"
          />
          <img
            :src="project_list[2].img"
            alt=""
            class="lis3"
            @click="lis(project_list[2])"
          />
        </div>
      </div> -->

      <!-- 商品 -->
      <div class="suggest">
        <div class="flex-center sell">
          <image src="../../static/images/tit-icon-l.png"></image>
          <span>为你推荐</span>
          <image src="../../static/images/tit-icon-r.png"></image>
        </div>
        <div class="shopBox" :style="shopLists">
          <div
            class="shopBox-item"
            v-for="(item, index) in shopList"
            :key="index"
            @click="deleteInfo(item)"
          >
            <div class="shopBox-item-img">
              <image :src="item.img || '../../static/image/logo.jpg'"></image>
            </div>
            <span class="shopBox-item-title">{{ item.name }}</span>
            <div class="shopBox-item-num row_between">
              <div class="shopBox-item-num-price">
                ￥<span class="num">{{ item.spu[0].market_price | zeros }}</span
                ><span class="spu">/{{ item.spu[0].spu_name }}</span>
              </div>
              <div class="icons" @click.stop="addShop(index)"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- <view v-if="toNext" @click="toNextAction" class="tonext flex-center">{{ bottomText }}
        <text style="color: red; margin-left: 10rpx">{{
          next_category_name
        }}</text>
      </view>
      <view class="nodata" v-if="goods_list.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>该分类暂时还没有商品~</view>
      </view> -->
      <my-addcart
        ref="minicart"
        :canshowprice="canshowprice"
        @tabBarTag="changeTabBarTag"
      ></my-addcart>
    </view>
    <my-tabar :types="2" ref="tabar" current="0"></my-tabar>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
// #ifdef H5
const wx = require("jweixin-module");
// #endif
// #ifdef MP-WEIXIN
let plugin = requirePlugin("WechatSI");
// #endif
export default {
  computed: {
    ...mapState(["companyInfo"]),
    shopLists() {
      return {
        "--length": this.shopList.length,
      };
    },
    classiLength() {
      return {
        "--classLength": this.classifiList.length,
      };
    },
  },
  data() {
    return {
      classifiList: [],
      shopList: [],
      canshowprice: false,
      selectInfo: null,
      page: 1, // 当前页数
      count: 0, // 当前公司总数
      options: null,
      project_list: [], //精选专题图
    };
  },
  filters: {
    timeFilter: function (value) {
      if (!value) return "暂无";
      return value.slice(0, 5);
    },
    zeros(num) {
      return +num.toString().replace(/(\.[0-9]*[1-9])0+$/, "$1");
    },
    spuChange(item) {
      let list = item.map((item) => Number(item.market_price)).sort();
      if (list.length == 1) {
        return list[0];
      } else {
        return list[0] + "~" + list.at(-1);
      }
    },
  },
  onShow() {
    // console.log("options", options);

    // if (this.company) {
    //   this.options = this.company;
    //   console.log("company", this.options);
    //   this.getShopInfo(); // 获取供应链商品
    //   this.getCard(); // 获取导航配置
    //   this.menuList(); // 获取购物车商品
    // } else { };

    if (this.companyInfo) {
      this.options = this.companyInfo.supplier_id;
      // 获取供应链商品
      this.getShopInfo();
      // 获取购物车商品
      // this.getCard();
      // 获取导航配置
      this.menuList();
    } else {
      this.$store.commit("changeCompanyInfo", null);
      uni.switchTab({
        url: "/pages/tabar/index",
      });
    }

    // onShow() {
    //   console.log("companyInfo", this.companyInfo);
    //   if (this.companyInfo) {
    //     // 获取供应链商品
    //     this.getShopInfo();
    //     // 获取购物车商品
    //     this.getCard();
    //     // 获取导航配置
    //     this.menuList();
    //   } else {
    //     this.$store.commit("changeCompanyInfo", null);
    //     uni.switchTab({
    //       url: "/pages/tabar/index",
    //     });
    //   }
  },
  methods: {
    lis(item) {
      uni.navigateTo({
        url: `/pages/index/subject?id=${item.id}&name=${item.name}`,
      });
    },

    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.goods_id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    menuList() {
      $https("GETN", `index?company_id=${this.options}`, {}, (res) => {
        if (res.data.errcode == 0) {
          this.classifiList = res.data.data.nav;
          // this.project_list = res.data.data.project_list;
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
        }
      });
    },
    getShopInfo(page = 1) {
      let data = {
        page: page,
        size: 14,
        company_id: this.options,
      };
      $https("GET", "getGoodsSelect", data, (res) => {
        if (res.data.errcode == 0) {
          // 获取一级分类(最多只展示10个分类,多余的自动删除)
          // let list = res.data.data.first_list
          // this.classifiList = []
          if (page == 1) this.shopList = [];

          // list.forEach((item, index) => {
          //   if (index <= 9) {
          //     this.classifiList.push(item)
          //   }
          // })
          res.data.data.list.forEach((item) => {
            this.shopList.push(item);
          });
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    // getCard() {
    //   $https("GETN", `getCart?company_id=${this.options}`, {}, (res) => {
    //     this.$refs.tabar.changetag(res.data.data.all_cart_num);
    //   });
    // },
    addShop(index) {
      var data = this.shopList[index];
      this.$refs.minicart.open(data);
    },
    changeTabBarTag(num) {
      //改变底部导航栏购物车tag
      console.log("num1", num);
      this.$refs.tabar.changetag(num);
    },
    navTo(item, index) {
      this.$store.commit("changeClassfi", item);
      this.$store.commit("changeCurrent", index);
      uni.switchTab({
        url: "/pages/tabar/classify",
      });
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    //如果请求到底就请求下一列表
    if (this.shopList.length < this.count) {
      this.page++;
      this.getShopInfo(
        this.page
        // {
        //   pid: this.pid,
        //   category_id: this.category_id,
        // },
        // this.secondIndex + 1
      );
    } else {
      // this.toNext = true;
      // if (!this.next_category_id) {
      //   this.bottomText = "没有更多啦~";
      // } else {
      //   this.bottomText = "点击加载";
      // }
    }
  },
  onUnload() {
    console.log("页面卸载");
  },
};
</script>

<style lang="scss" scoped>
$length: var(--length) / 2;
$classLengths: var(--classLength) / 5;

.suggest {
  .sell {
    align-items: baseline;
    padding: 30rpx 0;
    height: 30rpx;
    image {
      width: 40rpx;
      height: 22rpx;
    }
    span {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 0 30rpx;
    }
  }
}
.top {
  width: 100%;
  height: 245rpx;
  background-image: url("../../static/images/img-bg.png");
  position: relative;
  .card {
    width: 700rpx;
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    position: absolute;
    bottom: -80rpx;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    font-family: PingFang SC;
    &-left {
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;

      &-title {
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
        width: 450rpx;
      }

      &-tab {
        margin-top: 10rpx;
        align-items: center;

        .tip {
          align-items: center;

          &-content {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            width: 300rpx;
          }

          &-sold {
            width: 150rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            white-space: nowrap;
            text-align: right;
          }
        }

        .seg {
          width: 450rpx;
          height: 1rpx;
          background-color: #e5e5e5;
          margin-top: 20rpx;
          margin-bottom: 20rpx;
        }

        .condition {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 450rpx;
          margin-top: 10rpx;

          .title {
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            white-space: nowrap;
          }

          .time {
            width: 193rpx;
            image {
              width: 20rpx;
              height: 20rpx;
            }
          }

          .times {
            color: #ec7821;
            margin-left: 10rpx;
          }

          .money {
            color: #ec7821;
            margin-right: 10rpx;
          }
        }

        .address {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 450rpx;
          margin-top: 10rpx;

          &-info {
            width: 100%;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .iphone {
            width: 38rpx;
            height: 38rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 80%;
              height: 80%;
            }
          }
        }
      }

      &-rank {
        font-size: 22rpx;
        font-weight: 500;
        color: #999;
        margin-top: 20rpx;
        width: 450rpx;
      }
    }

    &-right {
      width: 94rpx;
      height: 94rpx;
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(4, 0, 0, 0.1);
      border-radius: 10rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/deep/.u-drawer {
  overflow: unset !important;
}

.pages {
  font-family: PingFang SC;
  position: relative;
  font-size: 24rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background: #f6f6f6;

  .bg_img {
    width: 750rpx;
    height: 120rpx;
    position: absolute;
    background-color: #fff;
    z-index: 0;
  }

  .contents {
    width: 100%;
    margin-top: var(--status-bar-height);

    .shop {
      width: 100%;
      background-color: #fff;
      padding: 20rpx;
      padding-top: 120rpx;
      box-sizing: border-box;
      .classifi {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(var(--classLengths), 130rpx);
        gap: 20rpx;

        &-item {
          align-items: center;
          justify-content: center;

          image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50% 50%;
          }

          &-span {
            font-size: 22rpx;
            font-weight: 500;
            color: #333;
            width: 100rpx;
            margin-top: 20rpx;
            text-align: center;
          }
        }
      }
    }

    .topics {
      margin: 30rpx 20rpx 20rpx 20rpx;
      font-family: PingFang SC;
      padding: 20rpx 15rpx;
      background-color: #fff;
      border-radius: 10rpx;

      .Selected {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .images {
        // display: flex;
        margin-top: 20rpx;
        position: relative;
        .lis1 {
          position: relative;
          margin-right: 10rpx;
          border-radius: 10rpx;
        }
        .lis2 {
          position: absolute;
          border-radius: 10rpx;
          height: 150rpx;
        }
        .lis3 {
          position: relative;
          border-radius: 10rpx;
          height: 150rpx;
          // margin-bottom: 10rpx;
        }
      }
    }

    .shopBox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat($length, 300rpx);
      gap: 20rpx;
      padding: 0 30rpx;

      &-item {
        width: 334rpx;
        height: 360rpx;
        border-radius: 20rpx;
        background-color: #fff;

        &-img {
          width: 200rpx;
          height: 200rpx;
          margin: 20rpx auto 0;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &-title {
          padding: 0 30rpx;
          font-size: 26rpx;
          font-weight: bold;
          color: #333333;
          display: inline-block;
          width: calc(100% - 40rpx);
          white-space: pre-wrap;
          margin: 10rpx auto 0;
          font-family: PingFang SC;
        }

        &-num {
          align-items: center;
          padding: 0 20rpx 20rpx;
          margin: 20rpx auto 0;

          &-price {
            font-size: 22rpx;
            color: #f55726;
            font-family: PingFang SC;
            font-weight: bold;
            .num {
              font-size: 32rpx;
            }
            .spu {
              font-size: 22rpx;
              color: #999999;
              font-weight: bold;
            }
          }

          .icons {
            width: 44rpx;
            height: 44rpx;
            background-color: #40ae36;
            text-align: center;
            line-height: 44rpx;
            border-radius: 50%;
            background-image: url("../../static/images/gouwuche2.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}

/deep/.uniui-star-filled {
  color: #12a38c !important;
}
</style>
